<!-- 
物理像素点
    - 物理真实存在的在屏幕中显示的最小颗粒
    - 厂商在出厂时就设置好的，例如iPhone6/7/8设置为750*1334
    - 1px不一定是1个物理像素点，如下
        PC端     1px = 1个物理像素点，即1:1的关系
        移动端   1px = n个物理像素点，与（设备）像素比有关，即1:n的关系
    拓展：以后提及像素比时，默认说的是移动端，而不是PC端

物理像素比
    1px能显示的物理像素点个数，也称为设备像素比、屏幕像素比、像素比

等价关系
    物理像素 = 逻辑像素*像素比
物理像素分别率（iPhone6/7/8，单位：px）
    750*1334
逻辑像素分别率（浏览器中模拟的就是它，也称为“开发尺寸”或开发像素，单位：px）
    375*667
设备像素比（单位：dpr）
    2

从以上可知：只要开发时，设置为375px，那么就能填满整个iPhone6/7/8的750px尺寸大小的屏幕。
 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>像素</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            div {
                /*
                    浏览器模拟iPhone6/7/8，
                    以下设置100px，屏幕中小工具测量为125px，像素比为1:1.25（这是假的比例哦）
                    因为真正的物理像素比是1:2，自己去手机商城查看像素比，那才是真的像素比
                */
                width: 100px;
                height: 300px;
                background-color: cyan;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
